<template>
  <div class="eachrts-wrapper">
    <div :id="echartsId" :style="styles"></div>
  </div>
</template>
<script>
export default {
  name: "Charts",
  props: {
    echartsId:{
      type: String,
      default: () => {
        return "";
      },
    },
    styles: {
      type: String,
      default: () => {
        return "width: 100%;height:286px;";
      },
    },
    options: {
      type: Object,
      default: () => {
        return {};
      },
    },
    chartUnitText:{
      type: String,
      default: () => {
        return "";
      },
    }
  },
  data() {
    return {
      myCharts: null,
      mapOption: null
    };
  },
  watch: {
    options: {
      handler:function(options, oldoptions){
        this.myCharts.clear();
        this.initCharts(options)
      },
      deep:true
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initCharts(this.options);
    });
  },
  methods: {
    initCharts(options) {
      let _this = this;
      this.myCharts = this.$echarts.init(document.getElementById(this.echartsId));
      this.mapOption = {
        visualMap: [
          {
            show: false,
            type: "continuous",
            seriesIndex: 0,
            min: 0,
            max: 400,
          },
        ],
        tooltip: {
          trigger: "axis",
            formatter:function(params){
            let str = `${params[0].axisValue} </br>`
            params.forEach(item => {
            str += `<span style="display:inline-block;width:10px;height:10px;background:${item.color};"></span><span style="margin-left:10px;line-height:20px;">${item.seriesName}</span>&nbsp;&nbsp;<span style="line-height:20px;">${item.data}${_this.chartUnitText}</span><br/>`
            })
            return str
        }
        },
        textStyle: {
          fontSize: 12,
          color: "#333",
        },
        xAxis: [
          {
            data: options.categories || "",
          },
        ],
        yAxis: [{}],
        legend: {
          textStyle: {
            color: "#333",
            fontSize:12
          },
          data: options.dataCate || "",
        },
        series: [],
      };
      if (options && options.categories) {
        this.mapOption.series.push({
          name: options.dataCate[0],
          type: "line",
          showSymbol: false,
          data: options.data1,
        });
        if (options.data2) {
          this.mapOption.series.push({
            name: options.dataCate[1],
            type: "line",
            showSymbol: false,
            data: options.data2,
          });
        }
        if (options.data3) {
          this.mapOption.series.push({
            name: options.dataCate[2],
            type: "line",
            showSymbol: false,
            data: options.data3,
          });
        }
        if (options.data4) {
          this.mapOption.series.push({
            name: options.dataCate[3],
            type: "line",
            showSymbol: false,
            data: options.data4,
          });
        }
      }
      this.myCharts.setOption(this.mapOption);
    },
  },
};
</script>
<style lang="less" scoped></style>
